<template>
<div class="ip">
    <HomeTop/>
      <div class="ip_beijing">
      <div class="lunbo">
        <img src="../assets/imgs/product/ipsystem/ipsystem_banner_pic.jpg" alt="" />
      </div>
       <div class="yun_soft animate-el">
        <img src="../assets/imgs/product/ipsystem/banner_tips.png" alt="" />
      </div>
      <div class="ip_effect">
      <ul>
        <li>
          <div class="fisrt_bg1">
            <img src="../assets/imgs/product/ipsystem/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/ipsystem/introduce_pic_1.png" alt="" />
            <div class="fisrt_bg1_wenzi">
              <h2 class="animate-el">分享展示，宣传推广</h2>
              <div class="fisrt_bg1_wenzi_p">
                <p  class="animate-el">
                  对商家产品进行包装展示，吸引客户浏览分享，刺激客户线下到店消费，实现可持续性拓客引流
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg2">
         <img src="../assets/imgs/product/ipsystem/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/ipsystem/introduce_pic_2.png" alt="" />
            <div class="fisrt_bg2_wenzi">
              <h2  class="animate-el">社交互动，IP打造</h2>
              <div class="fisrt_bg2_wenzi_p">
                <p  class="animate-el">
                  为员工及客户提供一个分享展示的平台，员工、会员、商家之间可以在线互动，互动产生交易，互动增强粘性
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg3">
            <img src="../assets/imgs/product/ipsystem/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/ipsystem/introduce_pic_3.png" alt="" />
            <div class="fisrt_bg3_wenzi">
              <h2  class="animate-el">在线预约，精准匹配</h2>
              <div class="fisrt_bg3_wenzi_p">
                <p  class="animate-el">
                    客户可以选择心仪的员工/门店进行在线预约，
                老板及员工还可以进行“预约时间设置”休息期间客户无法预约，实现资源精准匹配
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg4">
              <img src="../assets/imgs/product/ipsystem/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/ipsystem/introduce_pic_4.png" alt="" />
            <div class="fisrt_bg4_wenzi">
              <h2  class="animate-el">用户洞察，精准营销</h2>
              <div class="fisrt_bg4_wenzi_p">
                <p  class="animate-el">
                店长及员工均可以查看个人粉丝及评价，通过社交互动更加深入了解客户需求，
                查漏补缺，提升服务质量，实现精准营销
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="last_box">
              <div class="fisrt_bg5">
              <img  src="../assets/imgs/product/ipsystem/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/ipsystem/introduce_pic_5.png" alt="" />
            <div class="fisrt_bg5_wenzi">
              <h2  class="animate-el">1v1个性化按需定制</h2>
              <div class="fisrt_bg5_wenzi_p">
                <p  class="animate-el">
               根据企业的不同需求场景，添加相应的营销功能版块，
               个性化定制IP系统，助力企业深挖无限盈利可能！
                </p>
              </div>
            </div>
          </div>
    </div>
      </div>
       

<div></div>
<HomeBottom/>
</div>
</template>

<script>
import Observer from "../utils/observer";
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
export default {
  name: "ip",
  components:{
    HomeTop,
    HomeBottom,
  },
   mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".zoomin");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__zoomIn");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
};
</script>

<style  scoped>
.lunbo img{
    width: 100%;
    height: 656px;
}
.yun_soft{
    width: 834px;
    height: 130px;
     margin: auto;
    margin-top: 117px; 
}
.ip_effect ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: auto;
  width: 1348px;
  margin-bottom: 280px;
}
.ip_effect ul li {
  width: 615px;
  height: 756px;
  border: 1px dashed #4a96ea;
  margin-top: 254px;
  border-radius: 35px;
  position: relative;
}
.ip_effect ul li:nth-child(1) {
  margin-top: 180px;
}
.ip_effect ul li:nth-child(2) {
  margin-top: 180px;
}
.fisrt_bg1 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg1 img:nth-child(2) {
max-width: 48%;
    height: auto;
    position: absolute;
    top: -19px;
    left: 151px;
}
.fisrt_bg1_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg1_wenzi h2 {
color: rgb(246, 86, 79);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg1_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg1_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
.fisrt_bg2 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg2 img:nth-child(2) {
      max-width: 66%;
    height: auto;
    position: absolute;
    top: 14px;
    left: 89px;
}
.fisrt_bg2_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg2_wenzi h2 {
  color:rgb(246, 86, 79);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg2_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg2_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg3 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg3 img:nth-child(2) {
 max-width: 77%;
    height: auto;
    position: absolute;
    top: 41px;
    left: 100px;
}
.fisrt_bg3_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg3_wenzi h2 {
  color:rgb(246, 86, 79);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg3_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg3_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg4 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg4 img:nth-child(2) {
max-width: 66%;
    height: auto;
    position: absolute;
    top: 44px;
    left: 119px;
}
.fisrt_bg4_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg4_wenzi h2 {
  color:rgb(246, 86, 79);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg4_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg4_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
.last_box{
    width: 615px;
  height: 756px;
  border: 1px dashed #4a96ea;
  margin-top: 254px;
  border-radius: 35px;
  position: relative; 
  top: 0px;
  left: 502px;
  margin-bottom: 280px;
  }
  .fisrt_bg5 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg5 img:nth-child(2) {
max-width: 66%;
    height: auto;
    position: absolute;
    top: 44px;
    left: 119px;
}
.fisrt_bg5_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg5_wenzi h2 {
  color:rgb(246, 86, 79);
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg5_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg5_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

</style>